<template>
  <div class="dashboard-container">
    <div class="setContent">
      <div class="title">角色设置</div>
      <div class="butList" @click="addHander">
<!--        <span>+</span> 添加角色-->
      </div>
      <div class="cont" style="margin-top: 10px;">
        <div class="tableCont">
          <el-table ref="multipleTable" border :data="tableData" style="width: 100%">
            <el-table-column align="left" label="角色名称" width="240">
              <template slot-scope="scope">{{ scope.row.roleName }}</template>
            </el-table-column>
           <!-- <el-table-column align="center" label="角色描述" width="120">
              <template slot-scope="scope">{{ scope.row.roleDesc }}</template>
            </el-table-column>-->
            <el-table-column align="center" prop="name" label="管理员权限" >
              <template slot-scope="scope">
                <span class="titlab" :style="item.title | labCol" v-for="(item, ind) in scope.row.sysFunctionAbbrList" :key="ind">{{item.title}}</span>
              </template>
            </el-table-column>
            <el-table-column width="120" prop="address" center label="操作" show-overflow-tooltip>
              <template slot-scope="scope">
                <span class="actLab" @click="editerHandler(scope.row)">编辑</span>
<!--                <span class="actLab" @click="delHander(scope.row)">删除</span>-->
              </template>
            </el-table-column>
          </el-table>
          <div class="pageList">
            <el-pagination
              v-if="total > pageSize"
              layout="prev, pager, next"
              :total="total">
            </el-pagination>
          </div>
        </div>
      </div>




      <el-dialog :title="title" :visible.sync="dialogVisible" width="70%" center>
        <div>角色名称： <el-input v-model="value" size="mini" style="width: 200px;" placeholder="请输入角色名" /></div>
        <div>
          <div class="tit">分配权限：</div>
          <div>
            <el-checkbox-group v-model="checkList"  class="itemsLIst">
              <div class="items" v-for="it in adminListData" :key="it.id">
                <div :style="{color:it.color}" style="font-size: 14px;">
                  <img class="labIcon" :src="it.icon" alt="">
                  <!-- <span class="lab" :class="it.icon" :style="{background: it.color}" ></span>-->
                  <span style="font-size: 14px;">{{it.title}}</span>
                </div>
                <span><el-checkbox :label="it.id">全部管理权限</el-checkbox></span>
              </div>
            </el-checkbox-group>
          </div>
        </div>

        <span slot="footer" class="dialog-footer">
              <el-button type="primary" size="mini" style="background: #3345ff;border:none;" @click="submitSetAdmin">保存</el-button>
            </span>
      </el-dialog>


    </div>
  </div>
</template>

<script>
    import {mapGetters} from 'vuex'

    export default {
        name: 'Dashboard',
        data() {
          return {
              title: '添加角色',
              dialogVisible:false,
              loading:false,
              tableData: [],
              total: '',
              page: 1,
              pageSize:1000,
              value:'',
              roleId: '',
              options: [],
              adminListData: [],
              checkList:[]
          }
        },
        filters:{
            labCol(val){
                switch (val) {
                    case '通讯录管理' :
                        return {background: '#ffead4',color: '#a35111'}
                        break
                    case '工作台管理' :
                        return {background: '#ffe5f4',color: '#911a49'}
                        break
                    case '应用中心管理' :
                        return {background: '#d4dfff',color: '#21419c'}
                        break
                    case '审批' :
                        return {background: '#e1f9e4',color: '#0f7253'}
                        break
                    case '签到' :
                        return {background: '#d8f4f8',color: '#176b77'}
                        break
                    case '考勤打卡' :
                        return {background: '#fcfadb',color: '#cc8301'}
                        break
                    default :
                        return {background: '#eeeafc',color: '#2c168d'}
                }
            }
        },
        computed: {
            ...mapGetters([
                'name'
            ]),
        },
        created(){
            this.init()
        },
        methods: {

            init(){
                this.$store.dispatch('company/getCompanyRoleAct', {page: 1, pageSize: 10}).then((res) => {
                    this.tableData = res
                    this.loading = false
                }).catch(() => {
                    this.loading = false
                })
                // this.getMemberList()
                this.getAdminList()
            },

            addHander(){
                this.value = ''
                this.title = '添加角色'
                this.checkList = []
                this.dialogVisible = true
            },

            editerHandler(row){
              console.log(row);
              const ckList = row.sysFunctionAbbrList.map(n => {
                    return Number(n.id)
                })
              console.log(ckList);
              this.title = '编辑角色'
              this.value = row.roleName
              this.roleId = row.id
              this.checkList = ckList
              this.dialogVisible = true
            },

            delHander(row){

                return
                this.$store.dispatch('company/',{id:row.id}).then((res) => {
                    this.$message.success('删除成功！')
                    this.init()
                    this.loading = false
                }).catch(() => {
                    this.loading = false
                })
            },

            submitSetAdmin(){
                if (this.checkList.length == 0) {
                    this.$message.error('添加/编辑失败，权限项不能为空！')
                    return false
                }
                if (!this.value){
                    this.$message.error('请输入角色名！')
                    return false
                }
                const url = this.title == '编辑角色' ? 'company/putCompanyRoleAct' : 'company/setCompanyRoleAct'
                let functionIdList = [...this.checkList]
                functionIdList.forEach((n,i) => functionIdList.splice(i,1,Number(n)))
                const params =  {roleId: this.roleId,roleName:this.value ,functionIdList}
                this.$store.dispatch(url, params).then((res) => {
                    this.$message.success('数据提交成功成功！')
                    this.init()
                    this.dialogVisible = false
                    this.adminListData = res
                    this.loading = false
                }).catch(() => {
                    this.loading = false
                })
            },

            changeMember(val){
                // console.log(val)
            },

            getAdminList(){
                this.$store.dispatch('company/getCompanyAdminListAct').then((res) => {
                    this.adminListData = res
                    this.loading = false
                }).catch(() => {
                    this.loading = false
                })
            },

            getMemberList(){
                this.$store.dispatch('organization/getSimMemberAct', {pageSize:1000,includeSub: 0}).then((res) => {
                    this.options = res.rows
                    this.loading = false
                }).catch(() => {
                    this.loading = false
                })
            }

        }
    }
</script>
<style lang="scss">
  .setContent {
    .el-table thead th, .el-table thead tr {
      background: #edeffd;
    }

    .pageList {
      text-align: right;
      padding: 10px 0;
      .el-pager li {
        margin: 0 5px;
        min-width: 28px;
        width: 28px;
      }

      .active {
        background: #3345ff;
        border-radius: 100%;
        color: #fff;
      }
    }

    .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
      background: #3345ff;
      border-color: #3345ff;
    }
    .el-checkbox__input.is-checked+.el-checkbox__label{
      color:#606266;
    }
  }
</style>
<style lang="scss" scoped>
  .dashboard {
    &-container {
      .setContent {
        .title {
          text-align: center;
          padding: 0 15px;
          line-height: 40px;
          background: #eceffc;
        }
        .butList{
          padding: 0 20px;
          cursor: pointer;
          color: #3345ff;
          font-size: 14px;
          line-height: 50px;
          span{
            display: inline-block;
            position: relative;
            top:-1px;
            text-align: center;
            font-weight: bold;
            margin-right: 2px;
            color:#fff;
            background: #3345ff;
            line-height: 12px;
            height: 14px;
            width: 14px;
            border-radius: 100%;
          }
        }
        .cont {
          padding:0 20px;
          .tableCont{
            background: #fff;
          }
          .titlab{
            margin: 0 4px;
            font-size: 12px;
            border-radius: 4px;
            padding: 4px 10px;
          }
          .actLab{
            color:#3345ff;
            margin: 0 4px;
            cursor: pointer;
          }
        }
        .itemsLIst{
          display: flex;
          flex-wrap: wrap;
          line-height: 40px;
          .items{
            width: calc(50% - 5px);
            display: flex;
            justify-content: space-between;
            box-shadow: 2px 2px 10px #e6e6e6;
            margin: 5px 0;
            border-radius: 5px;
            padding: 10px 15px;
            .lab{
              display: inline-block;
              text-align: center;
              width: 40px;
              height: 40px;
              color:#fff;
              border-radius: 100px;
              font-size: 22px;
              margin-right: 10px;
            }
          }
          .items:nth-child(2n-1){
            margin-right: 10px;
          }
        }
        .tit{
          line-height: 50px;
        }
        .dialog-footer{
          display: flex;
          justify-content: center;
          text-align: center;
        }
      }
      .labIcon{
        width: 40px;
        height: 40px;
        // border-radius: 100%;
        float: left;
        margin-right: 10px;
      }
    }
  }
</style>
